<template>
  <div>
    <div class="roder-details">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="产品详情">
          <div class="info">
            <h3 class="title">产品信息</h3>
            <div class="list">
              <div class="list-div">
                <div>
                  <p>员工姓名</p>
                  <span>{{ productDetail.customerName }}</span>
                </div>
                <div>
                  <p>员工工号</p>
                  <span>{{ productDetail.smallCode }}</span>
                </div>
                <div>
                  <p>客户性别</p>
                  <span>{{ productDetail.sex == 0 ? '男性' : '女性' }}</span>
                </div>
                <div style="margin-top:10px">
                  <p>产品名称</p>
                  <span>{{ productDetail.productName }}</span>
                </div>
              </div>
            </div>

            <h3 class="title">面料辅料</h3>
            <div class="list" style="margin-bottom: 20px;">
              <div class="list-div">
                <div v-for="(item,key) in productDetail.fabricInfoList" :key="item.id">
                  <p v-if="item.isMianFu=='0'">面料</p>
                  <p v-if="item.isMianFu=='1'">里布</p>
                  <p v-if="item.isMianFu=='2'">底领里</p>
                  <span>{{ item.fabricCode }}</span>
                </div>

                <div>
                  <p>面料备注</p>
                  <span>{{ productDetail.fabricRemark }}</span>
                </div>

                <div>
                  <p>里布</p>
                  <span>{{ productDetail.libuName }}</span>
                </div>

                <div>
                  <p>低领尼</p>
                  <span>{{ productDetail.dilinniName }}</span>
                </div>
                <div>
                  <p>纽扣</p>
                  <span>{{ productDetail.buttonName }}</span>
                </div>
              </div>
            </div>

            <h3 class="title">款式与工艺</h3>
            <div class="list" style="margin-bottom: 20px;">
              <div class="list-div">
                <div v-for="(item,key) in productDetail.categoryInfo" :key="item.id">
                  <p>{{ item.smallTemplateName }}</p>
                  <span>{{ item.categoryName }}</span>
                </div>

              </div>
            </div>

            <h3 class="title">绣字撞色</h3>
            <h4 class="title2">绣字</h4>
            <div class="list">
              <div class="list-div">
                <!--                <div>-->
                <!--                  <p>品类</p>-->
                <!--                  <span>{{ productDetail.productName }}</span>-->
                <!--                </div>-->

                <div v-if="productDetail.xiuziType == '无绣字'">
                  <p>无绣字</p>
                </div>

                <div v-if="productDetail.xiuziType == '图片'">
                  <p>图片编号</p>
                  <span>{{ productDetail.xiuziImg }}</span>
                </div>

                <div v-if="productDetail.xiuziType == '文字'">
                  <p>绣字一</p>
                  <span class="b">{{ productDetail.xiuziOneNeirong }}</span>
                </div>

                <div v-if="productDetail.xiuziType == '文字'">
                  <p>绣字二</p>
                  <span class="b">{{ productDetail.xiuziTwoNeirong }}</span>
                </div>

                <div>
                  <p>绣字颜色</p>
                  <span>{{ productDetail.xiuziColor }}</span>
                </div>

                <div>
                  <p>绣字部位</p>
                  <span>{{ productDetail.xiuziWeizhi }}</span>
                </div>

                <div v-if="productDetail.xiuziType == '文字'">
                  <p>绣字字体</p>
                  <span v-if="productDetail.font!=null">{{ productDetail.font.embroideredName }}</span>
                </div>

                <div v-if="!!productDetail.zidingyiImg">
                  <p>自定义图片</p>
                  <img
                    style="width: 100px; height: 100px;margin-right:10px"
                    :src="productDetail.zidingyiImg"
                    fit="fit"></img>
                </div>

                <div>

                </div>

              </div>
            </div>

            <h4 class="title2">撞色</h4>
            <div class="list">
              <div class="list-div">
                <div v-for="(item,key) in productDetail.contrastcolorList" :key="item.id">
                  <p>{{ item.contrastColorName }}</p>
                  <span>{{ item.colorName }}</span>
                </div>
              </div>
            </div>

            <h3 class="title">量体信息</h3>
            <div class="list" style="margin-bottom: 20px;">
              <div class="list-div">
                <div v-for="(item,key) in siztlist" :key="item.id">
                  <p>{{ item.bodySizename }}</p>
                  <span>{{ item.bodysizeValue }}</span>
                </div>

              </div>
            </div>

            <div class="btns" style="justify-content: flex-start;">
              <!--<a class="b1" style="width:90px;margin-top: 20px;margin-right: 20px;">导出</a>-->
              <a class="b3" @click="goback" style="width:90px;margin-top: 20px;">返回</a>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>

    </div>

  </div>
</template>

<script>
import {getAction} from "../../api/manage";
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';

export default {
  data() {
    return {
      productDetail: {}, // 产品详情
      siztlist: [], // 尺寸列表
      url: {
        detail: '/OrderFactoryController/getDetail', // 产品详情
        listSmallSize: '/OrderFactoryController/listSmallSize', // 小产品尺寸
      },
      locale,
    }
  },
  created() {
    this.getDetail()
    this.listSmallSizeFunc()
  },
  methods: {

    /**
     * 做你妈小产品尺寸
     */
    listSmallSizeFunc() {
      getAction(this.url.listSmallSize, {
        'proID': this.$route.query.small
      }).then(res => {
        if (res.code == '0') {
          this.siztlist = res.data
        }
      })
    },

    // 获取产品详情
    getDetail() {
      getAction(this.url.detail, {
        'productId': this.$route.query.product,
        'small': this.$route.query.small
      }).then(res => {
        if (res.code == '0') {
          this.productDetail = res.data
        }
      })
    },
    // 返回上一个界面
    goback() {
      this.$router.go(-1)
    },

    selectTab: function (dataStr, i) {
      this[dataStr] = i
    }
  }
}
</script>

<style scoped lang="less">
.roder-details {
  width: 80%;
  margin: 0 auto;
  background: #fff;
  margin-top: 20px;
  padding: 20px 35px;

  .info {
    padding-top: 30px;
    padding-left: 26px;
    position: relative;
    min-height: 800px;


    .text11 {
      display: flex;
      margin-bottom: 20px;

      & > p {
        width: 100px;
        font-weight: 100;
        font-size: 14px;
        color: #333;

      }

      div {
        h5 {
          color: #333;
          font-size: 15px;
          font-weight: 500;

          display: block;
        }

        p {
          color: #333;
          font-size: 15px;
          font-weight: 100;

          display: block;
        }
      }
    }

    .title10 {
      color: #333;
      font-weight: 700;
      font-size: 16px;
      line-height: 16px;
      margin-bottom: 20px;
    }

    .text10 {
      display: flex;
      margin-bottom: 20px;

      & > p {
        width: 100px;
        font-weight: 100;
        font-size: 14px;
        color: #333;

      }

      div {
        span {
          color: #333;
          font-size: 15px;
          font-weight: 100;

          &.b {
            font-weight: 500;
          }

          display: block;
        }
      }
    }

    .table-css {
      position: relative;

      .bz {
        width: 447px;
        height: 63px;
        background: inherit;
        background-color: rgba(255, 221, 202, 1);
        position: absolute;
        right: 0px;
        top: -63px;
        display: flex;
        align-items: center;
        justify-content: center;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;

        p {
          width: 100%;
          color: rgb(251, 8, 8);
          font-size: 13px;
          padding-left: 10px;
          margin-bottom: 0px;
          line-height: 16px;
        }
      }
    }

    .btns {
      margin-top: 25px;
      margin-bottom: 60px;
      display: flex;

      .btn1 {

        border-width: 0px;
        width: 105px;
        height: 42px;
        background: inherit;
        background-color: rgba(81, 81, 81, 1);
        border: none;
        border-radius: 3px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
        font-weight: 500;
        font-style: normal;
        font-size: 13px;
        text-align: center;
        display: block;
        color: rgb(236, 227, 0);
        line-height: 40px;
        margin-right: 20px;
        cursor: pointer;
      }

      .btn2 {

        border-width: 0px;
        width: 105px;
        height: 42px;
        background: inherit;
        background-color: rgba(244, 244, 244, 1);
        border: none;
        border-radius: 3px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
        font-weight: 500;
        font-style: normal;
        font-size: 13px;
        text-align: center;
        display: block;
        color: rgb(104, 104, 104);
        line-height: 40px;
        margin-right: 20px;
        cursor: pointer;
      }
    }


    .price {
      color: rgb(38, 38, 38);
      font-size: 16px;

      span {
        color: rgb(215, 1, 1);
      }

      margin: 35px 0px;
    }

    .text1 {
      width: 533px;
      height: 105px;
      padding: 3px 2px 3px 2px;
      font-family: 'ArialMT', 'Arial';
      font-weight: 400;
      font-style: normal;
      font-size: 13px;
      text-decoration: none;
      letter-spacing: normal;
      color: #000000;
      vertical-align: none;
      text-align: left;
      text-transform: none;
      background-color: #f9f9f9;
      border-color: transparent;
      resize: none;
      outline: none;
      padding: 10px;
    }

    .tabs {
      .tab {
        margin-bottom: 10px;
        display: flex;

        h5 {
          width: 112px;
          padding: 2px 2px 2px 24px;
          background-color: rgba(249, 249, 249, 1);
          font-size: 15px;
          color: #333;
          display: flex;
          height: 36px;
          align-items: center;
          margin: 0px !important;
          margin-right: 6px !important;
        }

        .tab-content {
          height: 36px;
          display: flex;

          p {
            border: 1px solid rgb(242, 242, 242);
            min-width: 100px;
            height: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 15px;
            color: #333;
            font-size: 15px;
            margin-right: 6px;

            cursor: pointer;

            b {
              display: none;
              font-weight: 700;
            }

            &.active {
              color: rgb(255, 236, 112);
              font-weight: 700;
              background-color: rgb(74, 74, 74);
            }

            &:hover {
              b {
                display: block;
              }

              span {
                display: none;
              }
            }
          }
        }
      }
    }

    h3.title {
      height: 30px;
      line-height: 30px;
      position: relative;
      font-size: 16px;
      color: #333;
      font-weight: 700;
      margin-bottom: 25px;

      &:after {
        position: absolute;
        height: 100%;
        width: 5px;
        position: absolute;
        left: -25px;
        top: 0px;
        background-color: rgba(74, 74, 74, 1);
        content: "";
      }
    }

    .title2 {
      width: 112px;
      padding: 2px 2px 2px 24px;
      font-size: 15px;
      color: #333;
      display: flex;
      height: 36px;
      align-items: center;
      margin: 0px !important;
      margin-bottom: 10px !important;
    }

    .list {
      margin-bottom: 20px;

      .list-div {
        display: flex;
        flex-wrap: wrap;

        div {
          width: 33.3%;
          display: flex;
          height: 36px;
          align-items: center;

          p {
            width: 112px;
            padding: 2px 2px 2px 24px;
            background-color: rgba(249, 249, 249, 1);
            font-size: 15px;
            color: #333;
            display: flex;
            height: 36px;
            align-items: center;
            margin: 0px !important;
          }

          span {
            width: calc(100% - 112px);
            padding: 2px 2px 2px 24px;
            font-size: 15px;
            color: #333;
            display: flex;
            height: 36px;
            align-items: center;

            &.b {
              font-weight: 700;
            }
          }
        }
      }
    }
  }
}

.b3 {
  background-color: rgba(242, 242, 242, 1);
  width: 90px;
  height: 36px;
  color: #444;
  font-size: 15px;
  line-height: 36px;
  text-align: center;
  display: block;
}
</style>
